<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css"/>
</head>
<body>
    <!-- flex弹性盒是css中又一种布局手段,主要用来代替浮动完成页面布局 -->
    <!-- flex使元素具有弹性,让元素跟随页面大小改变 -->
	<!-- 弹性容器 要使用弹性盒，必须先将一个元素设置为弹性元素 flex块级弹性容器 inline-flex行内弹性容器 -->
	<!-- 弹性元素 弹性容器子元素（不是后代元素）是弹性元素（弹性项），一个元素可以同时是弹性容器和弹性元素 -->
	<!-- 主轴：弹性元素排列方向 -->
	<!-- 侧轴：与主轴垂直的方向 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
	
</body>
</html>
<style>
    ul{
        width: 200px;
        border: 10px solid;
		display: flex;
		/* flex-direction指定弹性容器中弹性元素排列方式 row默认值水平排列 row-reverse反向水平排列 column纵向排列 column-reverse返向纵向排列*/
		flex-direction: row;
		
		/* flex-wrap 超出区域是否自动换行 nowrap默认值 wrap沿着辅轴自动换行 wrap-reverse沿着主轴反方向换行*/
		/* flex-flow wrap 和 direction简写属性 */
		/* justify-content 如何分配主轴的空白空间 flex-start沿着主轴起边排列 flex-end沿着主轴终边排列 center 元素居中排列 space-around元素分配到元素两侧 space-evenly分布到元素单侧 space-between空白分布到元素单侧*/
		/* align-items 元素在辅轴如何对齐 stretch默认值 将元素长度设为相同值 flex-start元素不拉伸 沿着辅轴起边对其 center居中对齐*/
		/* align-content辅轴空白空间分布 */
    }
    li{
        width: 100px;
        height: 100px;
        background-color: beige;
        font-size: 50px;
        text-align: center;
		/* 弹性元素的属性 */
		/* flex-grow: 指定弹性元素生长系数,当父元素有多余空间，子元素如何伸展 */
		/* flex-grow:1; */
		/* flex-shrink弹性元素收缩系数，父元素空间不足时，如何收缩子元素 1默认值 0不收缩 值越大收缩越多*/
		/* flex-shrink:1 ; */
		/* align-self 用来覆盖当前元素的align-items*/
    }
    li:nth-child(2){
        background-color: cyan;
		/* flex-grow:2; */
		flex-shrink:2 ;
    }
    li:nth-child(3){
        background-color: darkorange;
		/* flex-grow:3; */
		flex-shrink:3 ;
    }
</style>